<template>
	<view class="index-container" v-cloak>
		<view class="head-box"
			:style="{'height':`${headerHeight}px`, backgroundColor: `rgba(82, 42, 6, ${bgOpacity})` }"
			v-if="statusCode">
			<image :src="logo" mode="heightFix"></image>
		</view>


		<swiper class="swiper" id="swiper" :style="{ height: swiperheight  }" circular :indicator-dots="false"
			:autoplay="false" :interval="3000" :duration="500">
			<swiper-item v-for="item1 in banner_list">
				<view :style="{backgroundImage: 'url('+ item1.head +')' }"
					style="width:100%;height:100%;display:inherit;background:#000; background-size: cover;">
				</view>
			</swiper-item>
		</swiper>
		<view class="main-box" v-if="statusCode">


			<view style="padding:20upx">

				<view class="search-box" @click="search">
					<uni-icons class="search-icon" type="search" size="24" color="#999"></uni-icons>
					<input class="search-input" placeholder="序列号查询" :disabled="true" />
				</view>

				<view class="apply">
					<view class="item" v-for="item in apply" @click="handleApply(item.index)">
						<image :src="item.icon"></image>
						<view>{{item.title}}</view>
					</view>
				</view>

				<view class="main-card">

					<view style="display: flex;" class="rukou">
						<view class="l">
							<view class="item" @click="goToList(1)">
								<view>
									<view>正版黄金芽</view>
									<view class="desc">R标认证·金汤黄叶</view>
								</view>

								<image mode="heightFix" src="http://www.huangjinya.cn/xcx/home/hjy.png" />
							</view>
						</view>
						<view class="r">
							<view class="item" @click="goToList(2)">
								<image src="http://www.huangjinya.cn/xcx/home/ajbc.png" />
								<view>安吉白茶</view>
								<view class="desc">核心产区</view>

							</view>
							<view style="margin-top: 20upx;" class="item" @click="goToList(3)">
								<image src="http://www.huangjinya.cn/xcx/home/aghc.png" />
								<view>安古红茶</view>
								<view class="desc">全系自研</view>
							</view>
						</view>
					</view>


					<view class="main-title">
						<image src="http://www.huangjinya.cn/xcx/home/list.png" />
						<view style="flex:1;padding-left:8upx">商品列表</view>
						<view style="font-size:26upx;font-weight:300" @click="goCategory">了解更多&nbsp;>&nbsp;</view>
					</view>

					<view class="main-content">
						<view class="item" v-for="v in list" @click="read(v.id)">
							<image mode="widthFix" :src="v.head"></image>
							<view class="content">
								<view class="title">
									<text class="hjy-tag-xianding" v-if="v.special==1">限定</text>
									{{v.title}}
								</view>
								<view class="tag">
									<text class="tag-item">{{v.kind}}</text>
									<text class="tag-item">{{v.area}}</text>
									<text class="tag-item">{{v.level}}</text>
								</view>
								<view class="footer">
									<view class="price">
										<text style="font-size:24upx">￥</text>
										<text style="margin-left:-4upx">{{v.price}}</text>
									</view>
									<view class="cert">{{v.sales_volume}}已售</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<loadingModel ref="loading" v-if="statusCode" />
		<errorModel ref="error" v-if="!statusCode" /> -->
	</view>
</template>

<script>
	import loadingModel from '@/components/loading-model/loading-model.vue';
	import errorModel from '@/components/error-model/error-model.vue';
	export default {
		components: {
			loadingModel,
			errorModel
		},
		data() {
			return {
				order: '',
				statusCode: true,
				statusBarHeight: 0,
				btnBarHeight: 0,
				headerHeight: 0, //状态栏+标题高度
				mainHeight: 0, //主体高度
				searchBoxWidth: 0,
				swiperheight: "0px",
				banner_list: [],
				logo: 'https://www.huangjinya.cn/image/honghai.png',
				list: [],
				bgOpacity: 0,
			}
		},
		onLoad() {
			this.getProductList()
			this.getBannerList()
		},

		onReady() {
			let MenuButtontop = wx.getMenuButtonBoundingClientRect().top //获取右上角胶囊上边高度
			let MenuButtonwidth = wx.getMenuButtonBoundingClientRect().width //获取右上角胶囊宽度
			this.statusBarHeight = MenuButtontop
			let MenuButtonbottom = wx.getMenuButtonBoundingClientRect().bottom //获取右上角下边胶囊高度
			this.btnBarHeight = MenuButtonbottom - MenuButtontop //胶囊高度，让搜索框高度和胶囊一样高
			this.headerHeight = MenuButtonbottom + 10 //整个头部高度
			this.searchBoxWidth = 'calc(100% - ' + MenuButtonwidth + 'px)';
			this.mainHeight = 'calc(100vh -  ' + (MenuButtonbottom + 10) + 'px)';
		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			this.bgOpacity = Math.min(e.scrollTop / 400, 1)
		},
		methods: {

			handleApply(index) {
				this.$Router.push({
					path: '/pages/search/search',
					query: {
						caiLiaoIndex: index
					}
				})
			},
			search() {
				this.$Router.push({
					path: "/pages/serial/serial"
				})
			},
			goCategory() {
				uni.switchTab({
					url: '/pages/category/category'
				});
			},
			read(id) {
				this.$Router.push({
					path: '/pages/detail/detail',
					query: {
						product_id: id
					}
				})
			},
			getProductList() {
				this.list = []
				this.$myRequest('product/list', {
					order: this.order
				}).then((res) => {
					this.statusCode = true;
					if (res.code == 1000) {
						this.list = res.data.data
						// this.$nextTick(function() {
						// 	this.$refs.loading.close()
						// });
					}
				}).catch((res) => {
					this.statusCode = false
				})
			},
			getBannerList() {
				this.$myRequest('banner/list', {}).then((res) => {
					if (res.code == 1000) {
						this.banner_list = res.data.data
						if (res.data.data.length > 0) {
							this.getswiperImageInfo(res.data.data[0].head)
						}
					}
				})
			},
			getswiperImageInfo(src) {
				uni.getImageInfo({
					src: src,
					success: (res) => {
						let endwidth = res.width / res.height
						this.swiperheight = 100 / endwidth + "vw"
					},
					fail: (err) => {}
				});
			},
			goToList(type) {
				this.$Router.push({
					path: '/pages/list/list',
					query: {
						type: type
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.head-box {
		top: 0;
		position: fixed;
		width: 100%;
		padding-left: 20upx;
		padding-right: 40upx;
		z-index: 999;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		padding-bottom: 24upx;
		font-size: 40upx;

		image {
			height: 50upx;
		}
	}

	.head-video {
		width: 100%;
	}

	.main-box {
		background: #f5f5f5;
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		border-radius: 10upx;



		.search-box {
			position: relative;
			z-index: 1;
			padding: 0 10upx;
			margin-top: 20upx;
			margin-bottom: 20upx;

			.search-icon {
				left: 40upx;
				top: 18upx;
				position: absolute;
			}

			.search-input {
				padding: 20upx 40upx;
				padding-left: 90upx;
				z-index: 999;
				border-radius: 10upx;
				background-color: #fff;
			}
		}


		.main-card {
			margin-top: 40upx;


			.rukou {
				padding: 10upx;
				display: flex;

				.l {
					padding-right: 10upx;
					flex: 1;

					.item {
						display: flex;
						//垂直排列
						flex-flow: column;
						//两端对齐
						justify-content: space-between;
						/* 垂直居中 */
						padding: 20upx;
						font-weight: 700;
						text-align: center;
						font-size: 36upx;
						height: 260upx;
						background-color: #fff;
						border-radius: 20upx;

						.desc {
							margin-top: 10upx;
							font-weight: 300;
							font-size: 22upx;
						}

						image {
							height: 100upx;
							margin: 0 auto;
						}

					}
				}

				.r {
					flex: 1;
					padding-left: 10upx;

					.item {
						font-weight: 700;
						border-radius: 20upx;
						height: 100upx;
						padding: 20upx;
						background-color: #fff;

						.desc {
							margin-top: 10upx;
							font-weight: 300;
							font-size: 22upx;
						}

						image {
							margin-top: 20upx;
							float: right;
							height: 70upx;
							width: 70upx;
						}
					}
				}
			}

			.main-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 10upx;
				padding-right: 10upx;
				font-size: 32upx;
				font-weight: 600;

				margin-top: 40upx;

				image {
					width: 40upx;
					height: 40upx;
				}
			}

			.main-content {
				padding-top: 10upx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				justify-content: flex-start; // 替代原先的space-between布局方式

				.item {
					flex: 1;
					background-color: #fff;
					margin: 5px; // 间隙为5px

					border-radius: 10upx;
					width: calc((100% - 20px) / 2); // 这里的10px = (分布个数2-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
					min-width: calc((100% - 20px) / 2); // 加入这两个后每个item的宽度就生效了
					max-width: calc((100% - 20px) / 2); // 加入这两个后每个item的宽度就生效了

					&:nth-child(2n) {
						// 去除第2n个的margin-right
					}

					image {
						width: 100%;
						border-radius: 10upx 10upx 0 0;
					}

					.content {
						padding: 20upx;

						.hjy-tag-xianding {
							padding: 6upx 8upx;
							color: #fff;
							background: linear-gradient(to right,
									$uni-color-success,
									$uni-color-green );
							font-size: 26upx;
							border-radius: 8upx;
							margin-right: 10upx;
						}

						.title {
							font-size: 30upx;
							line-height: 44upx;

							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1; //是几行就修改成数字几
							overflow: hidden;
						}

						.tag {
							margin-bottom: 14upx;

							.tag-item {
								font-size: 24upx;
								padding: 6upx 10upx;
								background-color: $uni-bg-color-grey;
								color: $uni-text-color-grey;
							}

							.tag-item:not(:first-of-type) {
								margin-left: 10upx;
							}
						}

						.code {
							color: #999;
							font-size: 26upx;
							margin-bottom: 14upx;
						}

						.footer {
							display: flex;
							color: $uni-color-error;
							align-items: center;
							justify-content: space-between;

							.price {
								font-weight: 500;
							}

							.cert {
								color: #999;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
</style>